<template>
  <a-modal
    class="loading"
    :visible="roleModalVisible"
    width="30%"
    title="角色管理"
    @cancel="handleClose"
    @ok="handlRoleOk"
  >
    <a-form class="form" ref="formView" :model="formStore" :rules="rules">
      <a-form-item label="分配角色" name="todoList">
        <a-checkbox-group v-model:value="formStore.todoList">
          <div class="w-100% leading-32px" v-if="accountSysList.length">
            <label for=""> <b> 系统角色 </b> </label>
          </div>
          <a-checkbox
            :disabled="true"
            v-for="item in accountSysList"
            :key="item.value"
            v-model:value="item.value"
          >
            {{ item.label }}
          </a-checkbox>
          <div class="w-100% leading-32px" v-if="accountCustomList.length">
            <label for=""> <b> 自定义角色 </b> </label>
          </div>
          <a-checkbox
            v-for="item in accountCustomList"
            :key="item.value"
            v-model:value="item.value"
          >
            {{ item.label }}
          </a-checkbox>
        </a-checkbox-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch, unref } from 'vue'
import { message } from 'ant-design-vue'
import {
  getAccountNumberList,
  setDistributeRoleSync,
  getInfoJsinfo,
} from '/@/api/system-manage/teacher-info'

const props = defineProps({
  roleModalVisible: {
    type: Boolean,
  },
  account: {
    type: String,
    default: '',
  },
})

const formView = ref()
const formStore = reactive({ todoList: [] })
const accountSysList = ref<any>([])
const accountCustomList = ref<any>([])
const rules = reactive({} as any)

const emit = defineEmits(['update:roleModalVisible', 'update:account'])

const handleClose = () => {
  formView.value.resetFields()
  emit('update:roleModalVisible', false)
  emit('update:account', '')
}

const handlRoleOk = async () => {
  const { code, message: messageStr } = await setDistributeRoleSync({
    ...unref(formStore),
    bindingValue: props.account,
  })
  if (code == 200) {
    message.success('操作成功')
    handleClose()
  } else {
    message.error(messageStr)
  }
}

watch(
  () => props.account,
  val => {
    if (val) {
      getAccountList(val) // 当前管理员获取学院列表
    }
  },
  { immediate: true }
)

// 获取当前权限
async function getAccountList(account) {
  const { code, data } = await getInfoJsinfo({ account })
  if (code == 200) {
    formStore.todoList = data.map(e => e.roleId)
  }
}

// 获取权限列表
const getIdList = async () => {
  try {
    const { data, code } = await getAccountNumberList({
      pageSize: 0,
      state: 'NORMAL',
    })
    if (code == 200) {
      data.forEach(e => {
        if (e.createType == 'SYS') {
          if (e.roleCode == 'PYJS' || e.roleCode == 'PYZZ') return
          accountSysList.value.push({
            value: e.roleId,
            label: e.roleName,
          })
        } else {
          accountCustomList.value.push({
            value: e.roleId,
            label: e.roleName,
          })
        }
      })
    }
  } catch (error) {
    console.log(error)
  }
}

onMounted(() => {
  getIdList()
})
</script>
